$(function () {
    // 需求1:获取文章分类信息,渲染到页面
    // 因为添加,修改,删除后都要重新渲染页面,所以封装成函数
    // let layer = layui.layer  这个模块可以导入也可以不导入  
    //调用函数
    initArtCateList()
    // 封装 渲染
    function initArtCateList() {
        axios({
            url: '/my/article/cates',
            method: 'get',
        }).then(({ data: res }) => {
            //成功回调
            // console.log(res)
            if (res.status !== 0) {
                return layer.msg('获取图书信息失败')
            }
            // 成功之后直接渲染
            let arr = []
            // 遍历返回的数据
            res.data.forEach(value => {
                arr.push(`
                    <tr>
                        <td>${value.Id}</td>
                        <td>${value.name}</td>
                        <td>${value.alias}</td>
                        <td>
                            <button data-id="${value.Id}" type="button" class="btn-edit layui-btn layui-btn-xs">编辑</button>
                            <button data-id="${value.Id}" type="button" class="del-edit layui-btn layui-btn-danger layui-btn-xs">删除</button>
                        </td>
                    </tr>
                `)
                // 循环结束,赋值
                $('tbody').empty().html(arr.join(''))
            });
        });
    }

    //需求2:点击按钮,弹出添加类别对话框
    let addBooks = ''
    $('#addBtn').on('click', function () {

        addBooks = layer.open({
            type: 1,
            title: '添加文章分类',
            area: ['500px', '250px'],
            // content里面要放form表单,所以放到最末尾
            content: `
                <form id="addForm" class="layui-form" action="">
                    <!-- 分类名称 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
                                class="layui-input">
                        </div>
                    </div>
                    <!-- 分类别名 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类别名</label>
                        <div class="layui-input-block">
                            <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
                                class="layui-input">
                        </div>
                    </div>
                    <!-- 按钮区域 -->
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            `
        });

    })

    //需求3: 添加文章分类 - 后添加的动态元素,需要使用事件委托
    $('body').on('submit', '#addForm', function (e) {
        e.preventDefault()
        axios({
            url: '/my/article/addcates',
            method: 'POST',
            data: $(this).serialize()
        }).then(({ data: res }) => {
            //成功回调
            if (res.status != 0) {
                // 失败 弹出失败信息
                layer.msg(res.message)
            }
            //成功 提示成功信息
            layer.msg('恭喜您,添加文章类别成功')
            // 重新渲染图书页面
            initArtCateList()
            // 自动关闭弹出窗
            layer.close(addBooks);
        });
    })

    // 需求4:点击修改按钮 1.修改分类弹文章弹出层  2.为弹出层赋值
    let indexEdit = 0;
    $('tbody').on('click', ".btn-edit", function () {
        //点击遍历按钮做两件事 1.弹出层
        indexEdit = layer.open({
            type: 1,
            title: '修改文章分类',
            area: ['500px', '250px'],
            // content里面要放form表单,所以放到最末尾
            content: `
                <form id="editForm" class="layui-form" lay-filter="editForm" action="">

                <!-- 隐藏域,填充id值,将来修改数据的时候使用 -->
                    <input type = "hidden" name="Id">
                    
                    <!-- 分类名称 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
                                class="layui-input">
                        </div>
                    </div>
                    <!-- 分类别名 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类别名</label>
                        <div class="layui-input-block">
                            <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
                                class="layui-input">
                        </div>
                    </div>
                    <!-- 按钮区域 -->
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            `
        });

        //2.弹出层赋值
        let id = $(this).attr('data-id')
        // console.log(id);
        // 发送ajax,根据id获取文章分类信息
        axios({
            url: '/my/article/cates/' + id,
            method: 'get',
            // URL参数  /:id 动态参数(路由参数)
            // 特点: /不能省略   :一定要去掉,   id是动态变化的
        }).then(({ data: res }) => {

            if (res.status !== 0) {
                //失败 弹出失败信息
                return layer.msg(res.data.message)
            }
            //成功  为弹出层form表单赋默认值
            layui.form.val("editForm", res.data)
        });
    })

    // 需求5:修改文章分类   点击修改按钮,修改文章分类-事件委托
    $('body').on('submit', "#editForm", function (e) {
        e.preventDefault()
        //修改分类
        axios({
            url: '/my/article/updatecate',
            method: 'post',
            data: $(this).serialize()
        }).then(({ data: res }) => {
            // console.log(res)
            if (res.status !== 0) {
                return layer.msg(res.message)
            }
            //成功:提示成功信息
            layer.msg('恭喜您,修改文章类别成功')
            //初始化文章分类
            initArtCateList()
            //关闭对话框
            layer.close(indexEdit)
        });
    })

    // 需求6:删除
    $('tbody').on('click', '.del-edit', function () {
        //获取自定义属性
        let id = $(this).attr('data-id')
        // console.log(id);
        if (id == 1 || id == 2) {
            return layer.msg('第一项和第二项不能删除')
        }
        //弹窗询问
        layer.confirm('你确认要修改吗？', function (index) {
            axios({
                // URL参数  /:id 动态参数(路由参数)
                // 特点: /不能省略   :一定要去掉,   id是动态变化的
                url: '/my/article/deletecate/' + id,
                method: 'get',
            }).then(({ data: res }) => {

                if (res.status !== 0) {
                    // 失败 弹出信息
                    return layer.msg(res.message)
                }
                //成功  初始化文章分类
                initArtCateList()
            })
            //关闭询问框
            layer.close(index)
        })
    })

})